<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%  response.addDateHeader("Expires", 0);response.setHeader("Pragma","no-cache"); response.setHeader("Cache-Control","no-cache");%>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
   <style type="text/css">
html,body {
	height: 100%;
	margin: 0;
	padding: 0;
	font: 14px/ 1.125 "宋体", Arial;
	background-image: url("../../img/menu/submenu_bg.png");
}

#map_canvas {
	float: left;
	width: 100%;
	height: 100%;
}

.qpdivshow {
	width: 100%;
	height: 100%;
	display: block;
	border-right: 1px solid #0099FF;
}
/*热点导航*/
.rddh{
	width:232px;
	height:40%;
	padding-left:10px;
	background-image: url("rddh.gif");
	background-repeat: no-repeat;
	background-color: #e0eaf4;
}
.itemdiv li{
	font-size:13px;
	font-family:宋体;
	line-height :20px
}
/*地图搜索*/
.dtss{
	width:232px;
	height:99px;
	padding-top:60px;
	padding-left:20px;
	background-image: url("dtss.gif");
	background-repeat: no-repeat;
	background-color: #e0eaf4;
}
/*负高度的文本，因为父层设置了Padding-top,要负高度才能在上方显示*/
.subjdiv{
	top:-10px;
	width:100%;
	height:auto;
	text-align:right;
	padding-right:10px;
	position: relative;
}
/*搜索结果*/
.ssjg{
	width:232px;
	height:25%;
	font-size:14px;
	font-family:宋体;
	padding-top:35px;
	padding-left:20px;
	background-image: url("ssjg.gif");
	background-repeat: no-repeat;
	background-color: #e0eaf4;
	text-decoration: none;
}
.ssjg li{
	line-height :20px
}
</style>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript">
      var map;
      var markerInfoList = new MarkerInfoList();
      
      function initialize() {
    	initializeMap();
    	initializeMarkerInfo();
      }

      function initializeMap(){
          var myOptions = {
                  zoom: 12,
                  mapTypeId: google.maps.MapTypeId.ROADMAP,
                  center: new google.maps.LatLng(28.607092,106.67681)
              };
          map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
      }

	  function initializeMarkerInfo(){
	      var shihaoLatlng = new google.maps.LatLng(28.538687,106.684456);
	      var liyuanLatlng = new google.maps.LatLng(28.518687,106.604456);
	      var fengchunLatlng = new google.maps.LatLng(28.659562,106.812859);
		  var tonghuaLatlng = new google.maps.LatLng(28.579562,106.432859);
		  var yuyangLatlng = new google.maps.LatLng(28.618884,106.556339);
		  var szLatlng = new google.maps.LatLng(28.592058,106.679935);
		  var szmdLatlng = new google.maps.LatLng(28.615569,106.677189)
	      var kexuyuan = new google.maps.LatLng(28.607092,106.67681);
	            
		  var marker1 = new google.maps.Marker({
			  position: shihaoLatlng, 
			  map: map, 
			  title:"石壕煤矿救护中队"
		  });   
		  var infowindow1 = new google.maps.InfoWindow({content: marker1.getTitle()});
	      google.maps.event.addListener(marker1, "click", function() {
		      infowindow1.open(map, marker1);
		  });

		  var markerInfo1 = new MarkerInfo(1, marker1, infowindow1);
	      markerInfoList.add(markerInfo1);
		  
	      var marker2 = new google.maps.Marker({
			  position: liyuanLatlng, 
			  map: map, 
			  title:"梨园煤矿救护中队"
		  });   
	      var infowindow2 = new google.maps.InfoWindow({content: marker2.getTitle()});
	      google.maps.event.addListener(marker2, "click", function() {
	    	  infowindow2(map, marker2);
		  });
		  var markerInfo2 = new MarkerInfo(2, marker2, infowindow2);
	      markerInfoList.add(markerInfo2);
		  
	      var marker3 = new google.maps.Marker({
			  position: fengchunLatlng, 
			  map: map, 
			  title:"逢春煤矿救护中队"
		  });
	      var infowindow3 = new google.maps.InfoWindow({content: marker3.getTitle()});
	      google.maps.event.addListener(marker3, "click", function() {
		      infowindow3.open(map, marker3);
		  });
		  var markerInfo3 = new MarkerInfo(3, marker3, infowindow3);
	      markerInfoList.add(markerInfo3);
		  
	      var marker5 = new google.maps.Marker({
			  position: tonghuaLatlng, 
			  map: map, 
			  title:"桐华煤矿救护中队"
		  });  
	      var infowindow5 = new google.maps.InfoWindow({content: marker5.getTitle()});
	      google.maps.event.addListener(marker5, "click", function() {
		      infowindow5.open(map, marker5);
		  });
		  var markerInfo5 = new MarkerInfo(5, marker5, infowindow5);
	      markerInfoList.add(markerInfo5);
		   
	      var marker6 = new google.maps.Marker({
			  position: yuyangLatlng, 
			  map: map, 
			  title:"渝阳煤矿救护中队"
		  });   
	      var infowindow6 = new google.maps.InfoWindow({content: marker6.getTitle()});
	      google.maps.event.addListener(marker6, "click", function() {
		      infowindow6.open(map, marker6);
		  });
		  var markerInfo6 = new MarkerInfo(6, marker6, infowindow6);
	      markerInfoList.add(markerInfo6);
		  
	      var marker7 = new google.maps.Marker({
			  position: szLatlng, 
			  map: map, 
			  title:"松藻煤矿救护中队"
		  });   
	      var infowindow7 = new google.maps.InfoWindow({content: marker7.getTitle()});
	      google.maps.event.addListener(marker7, "click", function() {
		      infowindow7.open(map, marker7);
		  });
		  var markerInfo7 = new MarkerInfo(7, marker7, infowindow7);
	      markerInfoList.add(markerInfo7);
		  
	      var marker8 = new google.maps.Marker({
			  position: szmdLatlng, 
			  map: map, 
			  title:"松藻煤电公司救护中队"
		  });   
	      var infowindow8 = new google.maps.InfoWindow({content: marker8.getTitle()});
	      google.maps.event.addListener(marker8, "click", function() {
		      infowindow8.open(map, marker8);
		  });
		  var markerInfo8 = new MarkerInfo(8, marker8, infowindow8);
	      markerInfoList.add(markerInfo8);
		  
		  var marker4 = new google.maps.Marker({
			  position: kexuyuan, 
			  map: map, 
			  icon: "warn.png",
			  title:"打通一矿"
		  });   
	  }
	  
	  function locate(markerId){
		 for(var i = 0; i < markerInfoList.size(); i++){
			 markerInfoList.get(i).infoWindow.close();
		 }
		 var markerInfo = markerInfoList.getById(markerId);
		 map.setCenter(markerInfo.marker.getPosition());
		 markerInfo.infoWindow.open(map, markerInfo.marker);
	  }

	  function search(){
		  var keywords = document.getElementById("searchText").value;
		  var hitMarkers = markerInfoList.searchByTitle(keywords);
		  writeHits(hitMarkers);
	  }

	  function writeHits(hitMarkers){
		  var ssjg = document.getElementById("ssjg");
		  ssjg.innerHTML = "";
		  if(hitMarkers == null || hitMarkers.length == 0){
			  ssjg.innerHTML = "无搜索结果！";
			  return;
		  }
		  var html = "<ul>";
		  for(var i = 0; i < hitMarkers.length; i++){
			  html += "<li>";
			  html += "<a href='#' onclick='locate("+ hitMarkers[i].id +");'>" + hitMarkers[i].marker.getTitle() + "</a>";
			  html += "</li>";
	      }
		  html += "</ul>";
		  ssjg.innerHTML = html;
	  }

	  function clearText(){
		  document.getElementById("searchText").value = "";
	  }
		
	  function checkText(){
		  var text= document.getElementById("searchText").value;
		  if(text==null || text=="")
			  document.getElementById("searchText").value = "请输入要查询的中队名称";
	  }
	    /**
	    *标注信息类，对应XML中的标注信息
	    */
		function MarkerInfo(id, marker, infoWindow){
			this.id = id;
			this.marker = marker;
			this.infoWindow = infoWindow;
	    }

	    function MarkerInfoList(){
	    	 this.index = -1;  
	    	 this.array = new Array();   
		}

	    MarkerInfoList.prototype.add = function (markerInfo){  
	        this.index = this.index + 1;  
	        this.array[eval(this.index)] = markerInfo;  
	    }  

	    MarkerInfoList.prototype.get = function(index){
	    	return this.array[eval(index)];
		}
		
	    MarkerInfoList.prototype.size = function(){
	        return this.index+1;;
		}
		
	    MarkerInfoList.prototype.getById = function(id){
			for(var i = 0; i < this.array.length; i++){
				if(this.array[i].id == id){
					return this.array[i];
				}
		    }
		}

	    MarkerInfoList.prototype.searchByTitle = function(title){
		    var count = 0;
		    var retArr = new Array();
			for(var i = 0; i < this.array.length; i++){
				if(this.array[i].marker.getTitle().indexOf(title) != -1){
					retArr[count] = this.array[i];
					count++;
				}
		    }
		    return retArr;
	    }
    </script>
  </head>
  <body onload="initialize();">
  	    <table id="maptb" width="100%" height="100%" border="1px solid " bordercolor="#a3c6e2" cellpadding="0" cellspacing="0" style="border-collapse:collapse;">
    		<tr>
				<td>
					<div id="map_canvas" ></div>
				</td>
				<td  valign="top" align="left" width="235px" >
					  <!-- 导航搜索层，默认显示 -->
					<div id="dhss" class="qpdivshow">
						<div class="rddh">
							<div class="subjdiv"></div>
							<div class="itemdiv">
								<ol>
									<li><a title="石壕煤矿救护中队" href="#" onclick="javascript:locate(1);">石壕煤矿救护中队</a></li>
									<li><a title="梨园煤矿救护中队" href="#" onclick="javascript:locate(2);">梨园煤矿救护中队</a></li>
									<li><a title="逢春煤矿救护中队" href="#" onclick="javascript:locate(3);">逢春煤矿救护中队</a></li>
									<li><a title="桐华煤矿救护中队" href="#" onclick="javascript:locate(5);">桐华煤矿救护中队</a></li>
									<li><a title="渝阳煤矿救护中队" href="#" onclick="javascript:locate(6);">渝阳煤矿救护中队</a></li>
									<li><a title="松藻煤矿救护中队" href="#" onclick="javascript:locate(7);">松藻煤矿救护中队</a></li>
									<li><a title="松藻煤电公司救护中队" href="#" onclick="javascript:locate(8);">松藻煤电公司救护中队</a></li>
								</ol>
							</div>
						</div>
						<div class="dtss">
							<input id="searchText" type="text" onfocus="Javascript:clearText();" onblur="Javascript:checkText();" value="请输入要查询的中队名称"></input>
							<input type="button" value="查询" onclick="Javascript:search();">
						</div>

						<div id="ssjg" class="ssjg">
						</div>
					</div>
				</td>    		
    		</tr>
    	</table>
  </body>
</html>
